<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="年龄范围">
            <el-slider v-model="form.age_scope" range :min="18" :max="80">
            </el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-tag v-if="form.age_scope">{{ form.age_scope[0] }} - {{ form.age_scope[1] }}岁</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="身高范围">
            <el-slider v-model="form.height_scope" range :min="130" :max="220">
            </el-slider>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-tag v-if="form.height_scope">{{ form.height_scope[0] }} - {{ form.height_scope[1] }}cm</el-tag>
        </el-col>
      </el-row>
     
      <el-form-item label="收入范围">
        <el-select v-model="form.income_scope" placeholder="请选择">
          <el-option
            v-for="item in config.income_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="婚况">
        <el-select v-model="form.choose_marriage_status" placeholder="请选择">
          <el-option
            v-for="item in config.marriage_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="form.choose_education" placeholder="请选择">
          <el-option
            v-for="item in config.education_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作地区">
        <el-cascader
          v-model="form.work_area"
          :options="area"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="小孩情况">
        <el-select v-model="form.choose_child_situation" placeholder="请选择">
          <el-option
            v-for="item in config.child_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否吸烟">
        <el-radio v-model="form.smoke" :label="0">不限</el-radio>
        <el-radio v-model="form.smoke" :label="1">可以吸烟</el-radio>
        <el-radio v-model="form.smoke" :label="2">不可吸烟</el-radio>
      </el-form-item>
      <el-form-item label="是否喝酒">
        <el-radio v-model="form.drink" :label="0">不限</el-radio>
        <el-radio v-model="form.drink" :label="1">可以喝酒</el-radio>
        <el-radio v-model="form.drink" :label="2">不可喝酒</el-radio>
      </el-form-item>
      <el-form-item>
        <div class="bottom">
          <div class="btn submit" @click="onSubmit">提交</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      form: {
      },
      default: 0,
      config: {},
      rules: {
        weight: [{ required: true, message: "请输入", trigger: "blur" }],
        height: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      area: [],
    };
  },
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  mounted() {
    this.form = this.info;
    this.getConfig();
    this.getArea();
  },
  methods: {
    getConfig() {
      this.$post("member/config").then((res) => {
        this.config = res.data;
      });
    },
    getArea() {
      this.$post("index/area").then((res) => {
        this.area = res.data;
      });
    },
    handleChange(e) {
      this.form.work_area = e;
    },
    onSubmit() {
      this.$post("user/create_update_member", this.form).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.$router.go(-1);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 30px;
  max-width: 500px;
  margin: 0 auto;
}
.bottom {
  display: flex;
  justify-content: center;
  .btn {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    line-height: 40px;
    text-align: center;
    width: 110px;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
  }
  .submit {
    border: none;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    color: #fff;
  }
}
:deep .el-slider__bar{
  background-color: #ef3e91;
}
:deep .el-slider__button{
  background-color: #ef3e91;
  border-color: #ef3e91;
}
:deep .el-tag {
  margin-right: 10px;
  background-color: #fff;
  border-color: #f43c8a;
  height: 30px;
  line-height: 26px;
  font-size: 12px;
  color: #f43c8a;
  border-radius: 40px;
  padding: 0 15px;
  .el-tag__close {
    color: #f43c8a;
  }
  .el-tag__close:hover {
    color: #fff;
    background-color: #f43c8a;
  }
}
</style>
